<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo title="基础使用">
				<pure-image
					:src="src"
					class="image"
				></pure-image>
			</pj-demo>

			<!-- 占位图 -->
			<pj-demo title="占位图">
				<pure-image
					:src="bigImg"
					:placeholder="placeholder"
					class="image"
				></pure-image>
			</pj-demo>

			<!-- 圆形 -->
			<pj-demo title="圆形">
				<pure-image
					:src="src"
					circle
					class="image"
				></pure-image>
			</pj-demo>

			<!-- 图片预览 -->
			<pj-demo title="图片预览">
				<pure-grid cols="3">
					<pure-block
						v-for="item in urls"
						:key="item"
					>
						<pure-image
							:src="item"
							:urls="urls"
							width="100%"
							height="100%"
							class="image"
						></pure-image>
					</pure-block>
				</pure-grid>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	const src = ref(`http://picsum.photos/seed/picsum/200/200`);
	const placeholder = ref("/static/images/placeholder.jpg");
	const bigImg = ref(`http://picsum.photos/seed/picsum/1920/1080`);

	const urls = ref([
		`/static/images/w_1.jpeg`,
		`/static/images/w_2.jpeg`,
		`/static/images/w_3.jpeg`,
		`/static/images/w_4.jpeg`,
		`/static/images/w_5.jpeg`,
		`/static/images/w_6.jpeg`,
		`/static/images/w_7.jpeg`,
		`/static/images/w_8.jpeg`,
		`/static/images/w_9.jpeg`
	]);
</script>

<style lang="scss" scoped>
	.image {
		background: var(--pure-background-default);
		border-radius: var(--pure-radius-default);
	}
</style>
